<template>
  <div>
    <Header :left="true" leftText="返回" title="生产现场主管审核" />
    <div>
      <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" @click="tabChange" swipeable
        style="top: 8px; font-size: 15px" color="#1c6c8d">
        <!-- 未确认页面 -->
        <van-tab title="未审核" style="font-size: 15px">
          <div class="textScroll">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsOne" :key="item.Id" style="position: relative;">
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle">
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>生产线:</b></van-col>
                  <van-col span="20">{{ item.PLineID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>订单号:</b></van-col>
                  <van-col span="20">{{ item.POrderID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px;">
                  <van-col span="4"><b>产品名称:</b></van-col>
                  <van-col span="18">{{ item.MaterialName }}</van-col>
                  <van-col span="2">
                    <van-button color="#138087" @click.stop="seeDetail(item)" style="
                          width: 85px;
                          height: 40px;
                          font-size: 12px;
                          position: absolute;
                          left: 80%;
                        " type="primary" text="查看详情" />
                  </van-col>
                </van-row>
                <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>班次:</b></van-col>
                    <van-col span="20" 
                    >{{ showShiftIDName(item.PShiftID) }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>班组:</b></van-col>
                    <van-col span="20" 
                    >{{ showTeamIDName(item.TeamID) }}</van-col>
                  
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>生产日期:</b></van-col>
                    <van-col span="20" 
                    >{{ item.ProductionDate }}</van-col>
                </van-row> -->

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>问题批次号:</b></van-col>
                  <van-col span="20">{{ item.BatchID }}</van-col>
                </van-row>


                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>待处理数量:</b></van-col>
                  <van-col span="20">{{ item.DeFectAmount }}</van-col>
                </van-row>


                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起人:</b></van-col>
                  <van-col span="20">{{ item.Creator }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起时间:</b></van-col>
                  <van-col span="20">{{ item.CreateDatetime }}</van-col>
                </van-row>



              </div>
            </div>
            <!-- 循环数据结束 -->
            <!-- <van-empty v-if="itemsOne == ''" image="search" description="暂无数据" /> -->
          </div>
        </van-tab>
        <!-- 已确认页面 -->
        <van-tab title="已审核">

          <div class="textScroll2">
            <!-- 循环数据开始 -->
            <div v-for="item in itemsTwo" :key="item.Id" style="position: relative;">
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle">
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>生产线:</b></van-col>
                  <van-col span="20">{{ item.PLineID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>订单号:</b></van-col>
                  <van-col span="20">{{ item.POrderID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px;">
                  <van-col span="4"><b>产品名称:</b></van-col>
                  <van-col span="18">{{ item.MaterialName }}</van-col>
                  <van-col span="2">
                    <van-button color="#138087" @click.stop="seeCheckedDetail(item)" style="
                          width: 85px;
                          height: 40px;
                          font-size: 12px;
                          position: absolute;
                          left: 80%;
                        " type="primary" text="查看详情" />
                  </van-col>
                </van-row>
                <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>班次:</b></van-col>
                    <van-col span="20" 
                    >{{ showShiftIDName(item.PShiftID) }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>班组:</b></van-col>
                    <van-col span="20" 
                    >{{ showTeamIDName(item.TeamID) }}</van-col>
                  
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"  
                    ><b>生产日期:</b></van-col>
                    <van-col span="20" 
                    >{{ item.ProductionDate }}</van-col>
                </van-row> -->

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>问题批次号:</b></van-col>
                  <van-col span="20">{{ item.BatchID }}</van-col>
                </van-row>


                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>待处理数量:</b></van-col>
                  <van-col span="20">{{ item.DeFectAmount }}</van-col>
                </van-row>


                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起人:</b></van-col>
                  <van-col span="20">{{ item.Creator }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起时间:</b></van-col>
                  <van-col span="20">{{ item.CreateDatetime }}</van-col>
                </van-row>


              </div>
            </div>
            <!-- <van-empty v-if="itemsTwo == ''" image="search" description="暂无数据" /> -->
            <!-- 循环数据结束 -->
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  List,
  Empty,
} from "vant";
import { _httpClient } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
import { memory } from "@/libs/utils";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(List);
Vue.use(Empty);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  name: "ckCheck03",
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
  },

  data() {
    return {
      //动态加载数据
      loading: false,
      finished: false,
      allSelected: false,
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      user: [], //登录用户信息

      //下拉刷新动态
      loadParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      columnsteamId: [
      ],
      columnsshift: [
      ],
      itemsOne: [
      ],
      itemsTwo: [
      ], //已确认明细
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    // this.getFactoryID().then(response => {
    //   this.getteam();
    //   this.getshift();
    // })
    this.$ac.addEventListener({
      name: 'reloadCK03'
    }, function (ret, err) {
      _this.itemsOne = []
      _this.getUncheckedList();
    });
  },
  methods: {
    //已指派数据动态加载
    onLoad() {
      //页数+1
      this.loadParams.pageNum = this.loadParams.pageNum + 1;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        //this. getLeaderCheckedList();
        // 加载状态结束
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    seeDetail(val) {
      let _this = this;
      this.$ac.openWin({
        name: "quality-ckCheck021Item",
        url: "./quality-ckCheck021Item.html",
        pageParam: {
          item: val,
          columnsshift: _this.columnsshift,
          columnsteamId: _this.columnsteamId
        }
      });
    },
    seeCheckedDetail(val) {
      let _this = this;
      this.$ac.openWin({
        name: "quality-ckCheckedItem",
        url: "./quality-ckCheckedItem.html",
        pageParam: {
          item: val
        }
      });
    },
    //获取工厂信息
    async getFactoryID() {
      let _this = this;
      try {
        let res = await _httpClientApi.get(
          _httpClientApi.getApiPrefix() + '/system/ConvertFactoryID/getList/' + _this.user.site,
        );
        if (res.code === 200) {
          _this.user.site = res.data.sapfactoryid;
          this.getLeaderUncheckedList();
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取班次信息
    async getshift() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/ProductionShift/GetList?factoryID=" + _this.user.site,
        );
        if (res.HttpCode === "200") {
          for (let index = 0; index < res.Data.length; index++) {
            if (res.Data[index].Actived == false) {
              delete res.Data[index];
            }
          }
          let shiftMap = res.Data.map(item => ({ pShiftName: item.PShiftName, pShiftID: item.PShiftID }))
          _this.columnsshift = shiftMap
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取班组信息
    async getteam() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/Team/GetList?FactoryID=" + _this.user.site,
        );
        if (res.HttpCode === "200") {
          let teamMap = res.Data.map(item => ({ teamID: item.TeamID, teamName: item.TeamName }))
          _this.columnsteamId = teamMap
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    showTeamIDName(teamID) {
      let teamName = teamID
      this.columnsteamId.forEach(item => {
        if (item.teamID === teamID) {
          teamName = item.teamName
        }
      })
      return teamName
    },
    showShiftIDName(pShiftID) {
      let pShiftName = pShiftID
      this.columnsshift.forEach(item => {
        if (item.pShiftID === pShiftID) {
          pShiftName = item.pShiftName
        }
      })
      return pShiftName
    },
    //tab切换
    tabChange(name, title) {
      if (name == 0) {
        //查询未审核信息
        this.getLeaderUncheckedList();
      } else if (name == 1) {
        //查询已审核信息
        this.getLeaderCheckedList();
      }
    },

    
    //获取质量制程主任未审核记录
    async getLeaderUncheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityDefectReview/GetList?OnSiteLeaderChecked=false&OnSiteLeaderUserID"+_this.user.userId,
        );
        if (res.Total === 0) {
          Toast.clear();
        } else {
          Toast.clear();
          _this.itemsOne = res.Data;
        }

      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取质量制程主任已审核记录
    async getLeaderCheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityDefectReview/GetList?OnSiteLeaderChecked=true&OnSiteLeaderUserID="+_this.user.userId,
        );
        if (res.Total === 0) {
          Toast.clear();
        } else {
          Toast.clear();
          _this.itemsTwo = res.Data;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.divMedia {
  margin-top: 10px;
  height: 190px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 15px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.buttonLeft {
  position: fixed;
  margin-top: -40px;
  right: 110px;
  width: 90px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  /* border: 1px solid #dcdcdc; */
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 0px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 7rem;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  z-index: 1;
}

.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 10rem;
  left: 0;
  bottom: 1px;
  overflow-y: scroll;
  width: 100%;
  margin-bottom: 0.5rem;
  z-index: 1;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}
</style>
